<template>
  <div>
    <div class="lunbod">
      <van-swipe :autoplay="3000" indicator-color="white"    class="lunbo">
        <van-swipe-item>
          <img src="https://img.alicdn.com/simba/img/TB1CZzqc7P2gK0jSZPxSuucQpXa.jpg" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img src="//img.alicdn.com/tps/i4/TB1tktbdND1gK0jSZFySuwiOVXa.jpg_q90_.webp" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img src="//img.alicdn.com/tps/i4/TB1tktbdND1gK0jSZFySuwiOVXa.jpg_q90_.webp" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img src="https://img.alicdn.com/simba/img/TB1Z6dBdbj1gK0jSZFOSuw7GpXa.jpg" alt />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 页面四宫格 -->
    <div style="height:84px;margin-top:2px;">
      <van-grid :border="false" :column-num="5">
        <van-grid-item
          icon="http://img2.imgtn.bdimg.com/it/u=2350900118,2328002266&fm=26&gp=0.jpg"
          text="咚咚抢"
        />
        <van-grid-item
          icon="http://img4.imgtn.bdimg.com/it/u=2831865495,3185946011&fm=26&gp=0.jpg"
          text="每日半价"
        />
        <van-grid-item
          icon="http://img5.imgtn.bdimg.com/it/u=3758034634,679656989&fm=26&gp=0.jpg"
          text="疯狂排行"
        />
        <van-grid-item
          icon="http://img4.imgtn.bdimg.com/it/u=2828814049,908897217&fm=26&gp=0.jpg"
          text="折上折"
        />
        <van-grid-item
          icon="http://img0.imgtn.bdimg.com/it/u=1732517103,1241986305&fm=15&gp=0.jpg"
          text="新风尚"
        />
      </van-grid>
    </div>

    <!-- 主题会场 -->
    <div class="datu">
      <!-- <div class="datu_top"></div>
      <van-grid :border="false" :column-num="2">
        <van-grid-item>
          <van-image src="https://img.yzcdn.cn/vant/apple-1.jpg" />
        </van-grid-item>
        <van-grid-item>
          <van-image src="https://img.yzcdn.cn/vant/apple-2.jpg" />
        </van-grid-item>
      </van-grid>
      <van-grid :border="false" :column-num="2">
        <van-grid-item>
          <van-image src="https://img.yzcdn.cn/vant/apple-1.jpg" />
        </van-grid-item>
        <van-grid-item>
          <van-image src="https://img.yzcdn.cn/vant/apple-2.jpg" />
        </van-grid-item>
      </van-grid>-->
      <div class="zhutu">
        <img src="../assets/01.jpg" alt />
      </div>
      <div class="situ">
        <img src="../assets/02.jpg" alt />
        <img src="../assets/03.jpg" alt />
        <img src="../assets/04.jpg" alt />
        <img src="../assets/02.jpg" alt />
      </div>
    </div>
    <!-- 小轮播上下 -->
    <div class="xiaolunbo">
      <img style="width:20%;height: 80px;float:left;" src="../assets/05.gif" alt />
      <van-swipe style="height: 80px;width:80%;float:right;" :autoplay="3000"    vertical>
        <van-swipe-item>
          <img src="https://aecpm.alicdn.com/tfscom/TB1XVwKdBr0gK0jSZFnXXbRRXXa.png" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img src="https://aecpm.alicdn.com/tfscom/TB1IU9PdRr0gK0jSZFnXXbRRXXa.png" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img src="https://aecpm.alicdn.com/tfscom/TB1uxALdUz1gK0jSZLeXXb9kVXa.png" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img src="https://aecpm.alicdn.com/tfscom/TB1IU9PdRr0gK0jSZFnXXbRRXXa.png" alt />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 领劵直播 -->
    <div style="height:1px;background:red"></div>
    <div class="shangpin">
      <div class="qian">
        <span>领劵直播</span>
        <span>今日已为用户省钱{{qian}}元</span>
      </div>
      <van-card
        v-for="(item,i) in list"
        :key="i"
        :price="item.pprice"
        :desc="item.pdesc"
        :title="item.pname"
        :thumb="item.pimg"
        @click="btn(item.pid)"
      >
        <div slot="tags">
          
          <van-tag plain type="danger">标签</van-tag>
        </div>
        <div slot="footer">
          
          <van-button size="mini">15元卷</van-button>
        </div>
      </van-card>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      qian: "69.433.080",
      list:''
    };
  },
  name: "lunbo",
  methods: {
    btn(id){
      console.log(id)
       this.$router.push('/xiangqing/'+id) 
    }
  },
  mounted() {
    let params = {uid:88990}
    this.$api.getSouye(params)
    .then((data)=>{
      console.log(data)
      this.list=data.data
    })
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
 img {
  
  display: block;
  
} 
.lunbod {
  width: 375px;
  height: 150px;
  padding: 1px;
}

.lunbo img {
  width: 375px;
  height: 150px;
}
.shangpin {
  width: 100vw;
  height: 1000px;
}
.qian {
  width: 100%;
  height: 40px;
}
.qian span:first-child {
  float: left;
}
.qian span:last-child {
  float: right;
}
.datu {
  background: url("../assets/1a.jpg");
  height: 190px;
  padding: 5px;
}
.zhutu {
  height: 60px;
}
.zhutu img {
  height: 60px;
  width: 100%;
}
.situ {
  height: 130px;
}
.situ img {
  width: 47%;
  height: 55px;
  float: left;
  margin: 5px;
}
.xiaolunbo img{
  height: 80px;
  width: 100%;
}
.xiaolunbo  {
  height: 80px;
  width: 100%;
  margin-top: 10px;
  
}
.shangpin{
  margin-top: 15px;
}
</style>